{% import '@SyliusUi/Macro/flags.html.twig' as flags %}

<div class="ui stackable two column grid">
    <div class="ten wide column">
        <h1 class="ui header">
            <i class="circular cart icon"></i>
            <div class="content">
                {{ 'sylius.ui.order'|trans }} #{{ order.number }} - {{ 'sylius_refund.ui.refunds'|trans }}
                <div class="sub header">
                    <div class="ui horizontal divided list">
                        <div class="item">
                            {{ order.checkoutCompletedAt|format_datetime }}
                        </div>
                        <div class="item" id="sylius-order-state">
                            {% include [('@SyliusAdmin/Order/Label/State' ~ '/' ~ order.state ~ '.html.twig'), '@SyliusUi/Label/_default.html.twig'] with {'value': ('sylius.ui.' ~ order.state)|trans} %}
                        </div>
                        <div class="item" id="sylius-order-currency">
                            {{ order.currencyCode }}
                        </div>
                        <div class="item">
                            {{ flags.fromLocaleCode(order.localeCode) }}{{ order.localeCode|sylius_locale_name }}
                        </div>
                        <div class="item">
                            {{ 'sylius.ui.purchased_from'|trans }}
                            {% include '@SyliusAdmin/Common/_channel.html.twig' with {'channel': order.channel} %}
                        </div>
                    </div>
                </div>
            </div>
        </h1>
    </div>
</div>
